<template>
    <div class="standard-management-container">
      <div class="back-button-container">
        <button class="back-button" @click="goBack()">
          <!-- <img src="@/assets/arrow-left-icon.png" alt="Back" class="back-icon" /> -->
          <span>设备管理</span>
        </button>
      </div>
  
      <div class="search-and-buttons">
        <input
          type="text"
          class="search-input"
          placeholder="请输入搜索关键字"
          v-model="searchText"
        />
  
        <div class="buttons">
          <button class="batch-delete-button" @click="deleteItems()">
            批量删除
          </button>
          <button class="add-button" @click="showDialog">添加</button>
          <button class="import-excel-button" @click="triggerFileInput">
            导入Excel
          </button>
          <input
            type="file"
            ref="fileInput"
            @change="importFromExcel"
            style="display: none"
            accept=".xlsx, .xls"
          />
        </div>

<!-- 弹窗 -->
<el-dialog title="添加设备" :visible.sync="dialogVisible">
      <el-form :model="form">
        <el-form-item label="设备名称" :label-width="formLabelWidth">
          <el-input v-model="form.deviceName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="单位" :label-width="formLabelWidth">
          <el-input v-model="form.unit" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addProject">添 加</el-button>
      </div>
    </el-dialog>

      </div>
  
      <table class="standards-table">
        <thead>
          <tr>
            <th>序号</th>
            <th>设备名称</th>
            <th>单位</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in filteredItems" :key="item.id">
            <td>{{ index + 1 }}</td>
            <td>{{ item.equipmentName }}</td>
            <td>{{ item.unit }}</td>
            <td>
              <button class="view-item-button" @click="showItem(item)">
                查看
              </button>
              <button class="delete-item-button" @click="deleteItem(item)">
                删除
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </template>
  
  <script>
  import XLSX from "xlsx";
  
  export default {
    name: "StandardManagement",
    data() {
      return {
        items: [
          // 示例数据，实际数据应从后端获取
          {
            id: 1,
            equipmentName: "气流分析仪(PF-PRO)",
            unit: "台",
          },
          {
            id: 2,
            equipmentName: "过滤效率测试仪",
            unit: "台",
          },
          {
            id: 3,
            equipmentName: "呼吸阻力测试仪",
            unit: "台",
          },
          // ... 其他数据行
        ],
        searchText: "",

        dialogVisible: false,
      form: {
        projectName: '',
        standardNumber: '',
      },
      formLabelWidth: '120px'
      };
    },
    computed: {
      filteredItems() {
        if (!this.searchText) {
          return this.items;
        }
        return this.items.filter((item) => {
          return Object.values(item).some((value) =>
            value.toString().toLowerCase().includes(this.searchText.toLowerCase())
          );
        });
      },
    },
    methods: {
        showDialog() {
      this.dialogVisible = true;
    },
    addProject() {
      // 在这里处理添加逻辑，例如发送请求到服务器
      console.log('Adding project:', this.form);
      // 重置表单
      this.form = {
        category: '',
        productName: '',
        standardNumber: '',
        standardName: ''
      };
      // 关闭弹窗
      this.dialogVisible = false;
    },
      triggerFileInput() {
        // 触发隐藏的文件输入元素的点击事件
        this.$refs.fileInput.value = null; // 清空文件输入，以便可以选择相同的文件
        this.$refs.fileInput.click();
      },
      importFromExcel(event) {
        const file = event.target.files[0];
        if (!file) {
          return;
        }
        const reader = new FileReader();
        reader.onload = (e) => {
          const data = new Uint8Array(e.target.result);
          const workbook = XLSX.read(data, { type: "array" });
          const sheetName = workbook.SheetNames[0];
          const worksheet = workbook.Sheets[sheetName];
          const json = XLSX.utils.sheet_to_json(worksheet, { header: 1 }); // 假设Excel没有标题行
          // 处理导入的数据
          this.processImportedData(json);
        };
        reader.readAsArrayBuffer(file);
      },
      processImportedData(data) {
        // 假设数据是一个二维数组，每个子数组代表一行
        // 如果Excel有标题行，header应该设置为1，那么这里从索引1开始取值
        this.items = data.map((row, index) => {
          return {
            id: index + 1, // 假设每行有一个唯一的ID
            equipmentName: row[0], // 假设第一列是设备名称
            unit: row[1], // 假设第二列是单位
          };
        });
      },
      showItem(item) {
        // 显示项目详情的逻辑
        alert(`查看详情：${JSON.stringify(item)}`);
      },
      deleteItem(item) {
        // 删除项目的逻辑
        if (confirm("确定要删除吗？")) {
          const index = this.items.indexOf(item);
          if (index !== -1) {
            this.items.splice(index, 1);
          }
        }
      },
    },
  };
  </script>
  
  <style scoped>
  .standard-management-container {
    max-width: 1200px;
    margin: auto;
    padding: 20px;
  }
  
  .search-and-buttons {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
  }
  
  .buttons {
    display: flex;
    gap: 10px; /* 增加按钮间距 */
  }
  
  .back-button-container {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
  
  .back-button {
    display: flex;
    align-items: center;
    background-color: transparent;
    border: none;
    cursor: pointer;
  }
  
  /*
  .back-icon {
    margin-right: 5px;
    width: 20px; 根据实际图标大小调整
    height: 20px; 根据实际图标大小调整 
  }
  */
  
  /* 添加按钮间距样式 */
  .batch-delete-button,
  .add-button,
  .import-excel-button {
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  
  .search-and-buttons {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
  }
  
  .search-input {
    flex-grow: 1;
    margin-right: 10px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  
  .buttons button {
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  
  .add-button {
    background-color: #007bff;
    color: white;
  }
  
  .import-excel-button {
    background-color: #17a2b8;
    color: white;
  }
  
  .standards-table {
    width: 100%;
    border-collapse: collapse;
  }
  
  .standards-table th,
  .standards-table td {
    padding: 10px;
    border: 1px solid #ddd;
    text-align: center;
  }
  
  .standards-table th {
    background-color: #f8f9fa;
  }
  
  .view-item-button {
    background-color: #28a745;
    color: white;
  }
  
  .delete-item-button {
    background-color: #dc3545;
    color: white;
  }
  </style>
  